<template>
  <div class="h-full">
    <DataScreenHeader
      :title="'大连金泰' + mesProducingMonthBI.title + '可视化看板'"
      :showMonth="false"
      classes=""
    />

    <div class="h-[100%]">
      <div style="height: calc(100% - 100px)" class="flex w-[100%] mb-[10px]">
        <!-- 上左侧图表 -->
        <div style="height: 100%; overflow: hidden; flex: 1">
          <dv-border-box13 class="overflow-hidden">
            <div
              dv-bg
              class="flex justify-center items-center m-[20px]"
              style="flex-direction: column"
            >
              <!-- <div class="title">
                <span class="text">
                  {{
                    dayjs(new Date()).format("MM-DD")
                  }}生产计划与完成情况</span
                >
              </div> -->
              <JTCharge04ScrollTable
                :planBIDTOS="mesProducingMonthBI"
                :tableColumnNum="10"
                class="mt-[15px]"
              />
            </div>
          </dv-border-box13>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ScrollTableQuantity from "../components/ScrollTableQuantity.vue";
import dayjs from "dayjs";
defineOptions({
  name: "DATASCREENRL",
  inheritAttrs: false,
});

const props = defineProps({
  mesProducingMonthBI: {
    type: Object,
    default: () => {},
  },
  refreshRate: {
    type: Number,
    default: () => 0,
  },
  pieTableData: {
    type: Array,
    default: () => [],
  },
  pieData: {
    type: Array,
    default: () => [],
  },
});

const emit = defineEmits(["get-info"]);
const { mesProducingMonthBI, refreshRate, pieTableData } = toRefs(props);

const dataList = ref({});
// watch(
//   () => mesProducingMonthBI,
//   (newVal) => {
//     if (newVal.value?.bodys?.length > 0) {
//       dataList.value = newVal.value;
//     }

//     // tableDataC.value.splice(0, 2);
//     // tableDataA.value.forEach((item, index) => {
//     //   item.name = mmA[index];
//     // });
//     // tableDataB.value.forEach((item, index) => {
//     //   item.name = mmB[index];
//     // });
//     // tableDataC.value.forEach((item, index) => {
//     //   item.name = mmC[index];
//     // });
//   },
//   {
//     deep: true,
//     immediate: true,
//   }
// );

let timer: any = ref(null);

const month = ref();
onMounted(() => {
  const date = new Date();
  month.value = String(date.getMonth() + 1); // 因为getMonth()返回的月份是从0开始计数的，所以需要加1

  if (refreshRate.value) {
    timer.value = setInterval(() => {
      emit("get-info");
    }, refreshRate.value * 1000);
  }
});

const singleData = ref([
  { value: 1048, name: "Search Engine" },
  { value: 735, name: "Direct" },
  { value: 580, name: "Email" },
  { value: 484, name: "Union Ads" },
  { value: 300, name: "Video Ads" },
]);
const data = ref([
  { finshBacth: 2, NofinshBacth: 6, finshNum: "25%", nofinshNum: "75%" },
]);
onBeforeUnmount(() => {
  clearInterval(timer.value);
  timer.value = null;
});
</script>

<style lang="scss" scoped>
.title {
  background-image: url(@/assets/images/screen/bg-title.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left;
  width: auto;
  height: 30px;
  line-height: 30px;
  .text {
    font-size: 32px;
    padding-left: 30px;
    // font-weight: 600;
    font-family: YOUSHE;
    writing-mode: horizontal-tb;
    text-orientation: upright;
    color: transparent;
    background: linear-gradient(
        0deg,
        rgb(255, 255, 255) 0px,
        rgb(255, 255, 255) 100%
      )
      text;
    clip-path: inset(1px);
  }
}
.bgchart {
  // background: rgba(15, 36, 62, 0.6);
  background: rgba(88, 175, 255, 0.1);
  height: 100%;
  margin: 0px 5px;

  // background-image: url(@/assets/images/screen/preview10.png);
  // background-repeat: no-repeat;
  // background-size: cover;
  // background-position: left;
}
.charts_des {
  margin-top: -50px;
  color: #838a9d;
  font-size: 13px;
  font-family: "DINLight";
}
.squary {
  width: 14px;
  height: 14px;
  display: inline-block;
  border-radius: 3px;
  margin-right: 3px;
}
</style>
